<template>
  <div class="orders-container">
    <div class="page-header">
      <h2>我的订单</h2>
      <div class="header-actions">
        <el-button type="primary" plain icon="Refresh" @click="fetchOrders">刷新</el-button>
      </div>
    </div>

    <el-card class="order-list" shadow="hover">
      <!-- 搜索区域 -->
      <div class="search-container">
        <el-form :inline="true" :model="queryParams" class="search-form">
          <el-form-item label="搜索">
            <el-input
              v-model="queryParams.searchQuery"
              placeholder="请输入商品名称进行查询"
              clearable
              prefix-icon="Search"
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select
              v-model="queryParams.ordfState"
              placeholder="请选择订单状态"
              clearable
              class="status-select"
            >
              <el-option label="待发货" value="PENDING_SHIP" />
              <el-option label="待收货" value="PENDING_RECEIVE" />
              <el-option label="已收货" value="RECEIVED" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table 
        :data="orders" 
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold'
        }"
        :cell-style="{
          padding: '12px 0'
        }"
        border
        stripe
        highlight-current-row
      >
        <el-table-column prop="ordfId" label="订单编号" min-width="120" />
        <el-table-column prop="cmdtyTitle" label="商品名称" min-width="200" show-overflow-tooltip />
        <el-table-column prop="cmdtyCost" label="单价" width="100" align="right">
          <template #default="scope">
            <span class="price">¥{{ scope.row.cmdtyCost.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ordfCount" label="购买数量" width="100" align="center" />
        <el-table-column prop="ordfTotalAmt" label="总金额" width="120" align="right">
          <template #default="scope">
            <span class="amount">¥{{ scope.row.ordfTotalAmt.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ordfCreatedOn" label="下单时间" width="180" />
        <el-table-column prop="ordfState" label="订单状态" width="120" align="center">
          <template #default="scope">
            <el-tag
              :type="getStatusType(scope.row.ordfState)"
              effect="light"
              size="small"
              class="status-tag"
            >
              {{ getStatusText(scope.row.ordfState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button 
              v-if="scope.row.ordfState === 'PENDING_RECEIVE'"
              type="success" 
              size="small" 
              @click="handleReceive(scope.row)"
              class="action-button"
            >
              确认收货
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getOrderApi, updateOrderApi } from '@/api/order'
import { useUserStore } from '@/store/islogin'

// 定义订单接口
interface Order {
  ordfId: number
  ordfCmdtyId: number
  ordfUserId: number
  ordfCount: number
  ordfTotalAmt: number
  ordfState: 'PENDING_SHIP' | 'PENDING_RECEIVE' | 'RECEIVED'
  ordfCreatedOn: string
  ordfLastUpdated: string
  cmdtyTitle: string
  cmdtyCost: number
}

// 查询参数接口
interface QueryParams {
  ordfUserId: string
  searchQuery: string
  ordfState: string
  page: number
  pageSize: number
}

// 分页相关数据
const total = ref(0)
const orders = ref<Order[]>([])
const useUser= useUserStore()

// 查询参数对象
const queryParams = ref<QueryParams>({
  ordfUserId: '', // 需要从用户状态或存储中获取
  searchQuery: '',
  ordfState: '',
  page: 1,
  pageSize: 10
})

// 获取订单状态对应的标签类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    'PENDING_SHIP': 'warning',
    'PENDING_RECEIVE': 'primary',
    'RECEIVED': 'success'
  }
  return statusMap[status] || 'info'
}

// 获取订单状态对应的中文文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'PENDING_SHIP': '待发货',
    'PENDING_RECEIVE': '待收货',
    'RECEIVED': '已收货'
  }
  return statusMap[status] || '未知状态'
}

// 处理搜索
const handleSearch = () => {
  queryParams.value.page = 1 // 重置到第一页
  fetchOrders()
}

// 处理重置
const handleReset = () => {
  queryParams.value = {
    ...queryParams.value,
    searchQuery: '',
    ordfState: '',
    page: 1
  }
  fetchOrders()
}

// 处理确认收货
const handleReceive = async (order: Order) => {
  try {
    const res = await updateOrderApi(order)
    if(res.code==200){
      ElMessage.success(res.msg)
      fetchOrders()
    }
  } catch (error) {
    ElMessage.error('确认收货失败')
  }
}

// 获取订单列表
const fetchOrders = async () => {
    if(!useUser.user){return}
    queryParams.value.ordfUserId=useUser.user.userId
    const res = await getOrderApi(queryParams.value)
    if(res.code==200){
      ElMessage.success(res.msg)
      console.log(res.data.list)
      orders.value=res.data.list
      total.value=res.data.total  
    }
}

// 处理分页大小变化
const handleSizeChange = (val: number) => {
  queryParams.value.pageSize = val
  fetchOrders()
}

// 处理页码变化
const handleCurrentChange = (val: number) => {
  queryParams.value.page = val
  fetchOrders()
}

// 页面加载时获取订单列表
onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.orders-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.page-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #409eff;
  border-radius: 2px;
}

.order-list {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-container {
  margin-bottom: 24px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.status-select {
  width: 160px;
}

.price {
  font-family: 'Monaco', monospace;
  font-weight: 500;
  color: #67c23a;
}

.amount {
  font-family: 'Monaco', monospace;
  font-weight: 500;
  color: #f56c6c;
}

.status-tag {
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  font-weight: 500;
}

.action-button {
  margin: 2px 0;
}

.pagination-container {
  margin-top: 24px;
  padding: 16px 0;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #ebeef5;
}

/* 自定义状态标签颜色 */
:deep(.el-tag--warning) {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}

:deep(.el-tag--primary) {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}

:deep(.el-tag--success) {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

/* 表格样式优化 */
:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-table th) {
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

/* 按钮样式优化 */
:deep(.el-button) {
  font-weight: 500;
}

:deep(.el-button--primary) {
  --el-button-hover-bg-color: #409eff;
  --el-button-hover-border-color: #409eff;
}

:deep(.el-button--success) {
  --el-button-hover-bg-color: #67c23a;
  --el-button-hover-border-color: #67c23a;
}

/* 输入框样式优化 */
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}
</style> 